<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PDF</title>
    <!-- <link rel="stylesheet" href="__PUBLIC__/dist/css/pdf_viewer.css"> -->
    <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="stylesheet">
    <style>
        /* 导航 */

        body,
        html {
            padding: 0;
            margin: 0;
            background: #f1f1f1;
        }

        * {
            box-sizing: border-box;
        }

        .my-page {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* .swiper-container,
        .my-container {
            height: 100%;
            overflow-y: auto;
        } */

        .my-container {
            padding-top: 40px;
        }

        /* .swiper-slide {
            height: 100%;
        } */

        .my-nav {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            padding: 5px;
            display: flex;
            align-items: center;
            align-items: center;
            z-index: 9999;
            background: #222;
        }

        .my-nav>.my-title {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            width: 300px;
            color: #fff;
            margin: auto;
            pointer-events: none;
            text-align: center;

        }

        .my-nav~.my-container {
            padding-top: 50px;
        }

        .my-nav a {
            display: flex;
            color: #fff;
            width: 40px;
            height: 40px;
            justify-content: center;
            align-items: center;
            background: #333;
            cursor: pointer;
        }

        .pull-right {
            flex: 1;
            display: flex;
            padding-right: 10px;
            justify-content: flex-end;
        }

        .my-nav a:hover {
            background: #999;
        }

        .my-nav a:active {
            box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, .3);
        }

        .swiper-slide {
            position: relative;
            padding: 10px;
            text-align: center;
        }

        .swiper-slide>img {
            /* position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0; */
            box-shadow: 0 0 2px 2px rgba(0, 0, 0, .3);
        }

        /* //zoom */

        .my-container[data-zoom="1"] .swiper-slide>img {
            width: 10%;
        }

        .my-container[data-zoom="2"] .swiper-slide>img {
            width: 20%;
        }

        .my-container[data-zoom="3"] .swiper-slide>img {
            width: 30%;
        }

        .my-container[data-zoom="4"] .swiper-slide>img {
            width: 40%;
        }

        .my-container[data-zoom="5"] .swiper-slide>img {
            width: 50%;
        }

        .my-container[data-zoom="6"] .swiper-slide>img {
            width: 60%;
        }

        .my-container[data-zoom="7"] .swiper-slide>img {
            width: 70%;
        }

        .my-container[data-zoom="8"] .swiper-slide>img {
            width: 80%;
        }

        .my-container[data-zoom="9"] .swiper-slide>img {
            width: 90%;
        }

        .my-container[data-zoom="10"] .swiper-slide>img {
            width: 100%;
        }

        .fixed-footer {
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.3);
            padding: 10px;
        }
    </style>
</head>

<body>
    <section id="myapp" class="my-page">
        <!-- nav -->
        <nav class='my-nav'>
            <h3 class="my-title"></h3>
            <a id="my-nav-prev">&lt;</a>
            <a id="my-nav-next">&gt;</a>
            <a id="my-nav-remove"> - </a>
            <a id="my-nav-add"> + </a>
            <div class='pull-right'>
                <a id="my-nav-full"> □ </a>
            </div>
        </nav>
        <!-- content -->
        <div class="my-container" data-zoom='7'>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <!-- <div class="swiper-slide">slider1</div>
                    <div class="swiper-slide">slider2</div>
                    <div class="swiper-slide">slider3</div> -->
                </div>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="fixed-footer"></div>
    </section>
    <!-- 读取用 -->
    <div id="pageContainer" style="display:none"></div>
    <script src="build/pdf.min.js"></script>
    <script src="build/pdf_viewer.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
    <script>
        'use strict';
        /**
         * @author 423822728@qq.com
        */

        //sw pdf config
        var config = {
            max: 10,
            min: 1,
            //图片质量
            qu: ("ontouchend" in document) ? .1 : .9,
        }
        //下一页
        document.querySelector("#my-nav-next").addEventListener("click", function () {
            sw.slideNext();

        })
        //上一页
        document.querySelector("#my-nav-prev").addEventListener("click", function () {
            sw.slidePrev();
        })
        //zoom
        var myapp = document.querySelector("#myapp");
        var mycontainer = document.querySelector(".my-container");
        //点击放大pdf
        document.querySelector("#my-nav-add").addEventListener("click", function () {
            var zoom = mycontainer.dataset.zoom;
            zoom++;
            zoom = Math.min(zoom, config.max);
            mycontainer.dataset.zoom = zoom;
        })
        //点击缩小pdf
        document.querySelector("#my-nav-remove").addEventListener("click", function () {
            var zoom = mycontainer.dataset.zoom;
            zoom--;
            zoom = Math.max(zoom, config.min);
            mycontainer.dataset.zoom = zoom;

        })
        //full
        document.querySelector("#my-nav-full").addEventListener("click", function () {
            //检测全屏对象
            if (lanchFullDom() == myapp) {
                //退出全屏  ie 下无效原因未知
                exitFullscreen();
            } else {
                //全屏
                lanchFullscreen(myapp);
            }

            // if (window.parent && window.parent.full) {
            //     window.parent.full(sw, window.location.href);
            // }
            sw.update();

        })
        //全屏时触发
        document.addEventListener('webkitfullscreenchange', function () {
            // mycontainer.innerHTML = swdom;
            // sw = new Swiper('.swiper-container', {
            //     //按键激活
            //     keyboardControl: true,
            //     setWrapperSize: true,
            // })
            // console.log(document.webkitFullscreenElement.clientWidth)
        })
        //get full dom
        function lanchFullDom() {
            var el = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullscreenElement || null;

            return el

        }
        function lanchFullscreen(element) {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            }
            else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            }
            else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
            else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullScreen();
            }
        }
        //退出全屏
        function exitFullscreen() {
            if (document.exitFullscreen) {
                //html5
                document.exitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                //ff
                document.mozCancelFullScreen();
            }
            else if (document.msExitFullscreen) {
                //ie
                document.msExiFullscreen();
            }
            else if (document.webkitCancelFullScreen) {
                //webkit
                document.webkitCancelFullScreen();
            }
        }

        //PDF read

        // PDFJS.workerSrc = 'https://cdn.bootcss.com/pdf.js/1.9.640/pdf.worker.min.js';
        // var host = "http://wpt.wei580.com/";
        //pdf url
        // var DEFAULT_URL = "__PUBLIC__/dist/image/pdf.pdf";//demo
        var DEFAULT_URL = "web/compressed.tracemonkey-pldi-09.pdf";

        //按照比例 生成图片
        var DEFAULT_SCALE = .9;

        //read pdf container
        var container = document.getElementById('pageContainer');

        //获得标题
        var title = PDFJS.getFilenameFromUrl(DEFAULT_URL);
        //decodeURI(title) 反序列化
        document.title = decodeURI(title);
        //swiper
        var sw = '';

        // Fetch the PDF document from the URL using promises.
        PDFJS.getDocument(DEFAULT_URL).then(function (doc) {

            var swobj = document.querySelector(".swiper-wrapper");

            for (var i = 0; i < doc.numPages; i++) {
                var cell = document.createElement("div");
                cell.className = "swiper-slide cell" + i;
                swobj.appendChild(cell);
            }
            //init sw
            function setPageNo(sw) {
                // go to swiper index
                var go = sw.activeIndex+1;
                document.querySelector(".fixed-footer").innerHTML = go + "/" + doc.numPages;
            }
            sw = new Swiper('.swiper-container', {
                //按键激活
                keyboardControl: true,
                //flex 
                setWrapperSize: true,
                //高度随内容变化
                // autoHeight: true,
                // height: window.innerHeight
                onInit: setPageNo,
                onTransitionStart: setPageNo
            })
            //return swiper object to iframe win
            if (window.parent && window.parent.keyFn) {
                window.parent.keyFn(sw);
            }

            // Use a promise to fetch and render the next page.

            loadImage(1);

            function loadImage(pageNum) {

                return doc.getPage(pageNum).then(function (pdfPage) {

                    // Create the page view.
                    var pdfPageView = new PDFJS.PDFPageView({
                        container: container,
                        id: pageNum,
                        scale: DEFAULT_SCALE,
                        defaultViewport: pdfPage.getViewport(DEFAULT_SCALE),
                        annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory(),
                        renderInteractiveForms: true,
                    });

                    // 网页视图绘制
                    pdfPageView.setPdfPage(pdfPage);

                    //绘制canvans
                    pdfPageView.draw().then(function (d) {
                        var obj = document.querySelector("[data-page-number='" + pageNum + "']");

                        var canvas = obj.querySelector("canvas");
                        // 画质太高会影响加载速度，手机端可能会崩
                        var src = canvas.toDataURL("image/jpeg", config.qu)
                        //获得base64地址 add到页面上
                        var img = new Image();
                        img.src = src;
                        var cellStr = ".cell" + (pageNum - 1);
                        var cell = document.querySelector(cellStr);
                        cell.appendChild(img);
                        //加载中

                        // document.querySelector(".fixed-footer").innerHTML = pageNum + "/" + doc.numPages;

                        if (pageNum < doc.numPages) {
                            // next page

                            loadImage(pageNum + 1)
                        } else {

                            return;
                        }
                    });
                });


            }

        });

    </script>
</body>

</html>